{% extends "base.html" %}
{% block content %}
    <div class="row page" id="demo" style="display: block; min-height: 1675px;">
        <div class="col-md-12">
            <h3>Basic AJAX demo</h3>
            <div class="row">
                <div class="col-md-4 col-sm-8 col-xs-8">
                    <button type="button" class="btn btn-success btn-sm" onclick="demo_create();"><i
                            class="glyphicon glyphicon-asterisk"></i> Create
                    </button>
                    <button type="button" class="btn btn-warning btn-sm" onclick="demo_rename();"><i
                            class="glyphicon glyphicon-pencil"></i> Rename
                    </button>
                    <button type="button" class="btn btn-danger btn-sm" onclick="demo_delete();"><i
                            class="glyphicon glyphicon-remove"></i> Delete
                    </button>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-4" style="text-align:right;">
                    <input type="text" value=""
                           style="box-shadow:inset 0 0 4px #eee; width:120px; margin:0; padding:6px 12px; border-radius:4px; border:1px solid silver; font-size:1.1em;"
                           id="demo_q" placeholder="Search">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="jstree_demo" class="demo jstree jstree-1 jstree-default"
                         style="margin-top:1em; min-height:200px;" role="tree" aria-multiselectable="true" tabindex="0"
                         aria-activedescendant="demo_root_1" aria-busy="false">
                        <ul class="jstree-container-ul jstree-children jstree-striped jstree-contextmenu jstree-wholerow-ul jstree-no-dots"
                            role="group">
                            <li role="treeitem" aria-selected="false" aria-level="1"
                                aria-labelledby="demo_root_1_anchor" aria-expanded="false" id="demo_root_1"
                                class="jstree-node  jstree-closed">
                                <div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div>
                                <i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor"
                                                                                             href="#" tabindex="-1"
                                                                                             id="demo_root_1_anchor"><i
                                    class="jstree-icon jstree-themeicon jstree-themeicon-custom" role="presentation"
                                    style="background-image: url(&quot;/static/3.3.8/assets/images/tree_icon.png&quot;); background-position: center center; background-size: auto;"></i>Root
                                1</a></li>
                            <li role="treeitem" aria-selected="false" aria-level="1"
                                aria-labelledby="demo_root_2_anchor" id="demo_root_2"
                                class="jstree-node  jstree-leaf jstree-last">
                                <div unselectable="on" role="presentation" class="jstree-wholerow">&nbsp;</div>
                                <i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor"
                                                                                             href="#" tabindex="-1"
                                                                                             id="demo_root_2_anchor"><i
                                    class="jstree-icon jstree-themeicon jstree-themeicon-custom" role="presentation"
                                    style="background-image: url(&quot;/static/3.3.8/assets/images/tree_icon.png&quot;); background-position: center center; background-size: auto;"></i>Root
                                2</a></li>
                        </ul>
                    </div>
                    <script>
                        function demo_create() {
                            var ref = $('#jstree_demo').jstree(true),
                                sel = ref.get_selected();
                            if (!sel.length) {
                                return false;
                            }
                            sel = sel[0];
                            sel = ref.create_node(sel, {"type": "file"});
                            if (sel) {
                                ref.edit(sel);
                            }
                        };

                        function demo_rename() {
                            var ref = $('#jstree_demo').jstree(true),
                                sel = ref.get_selected();
                            if (!sel.length) {
                                return false;
                            }
                            sel = sel[0];
                            ref.edit(sel);
                        };

                        function demo_delete() {
                            var ref = $('#jstree_demo').jstree(true),
                                sel = ref.get_selected();
                            if (!sel.length) {
                                return false;
                            }
                            ref.delete_node(sel);
                        };
                        $(function () {
                            var to = false;
                            $('#demo_q').keyup(function () {
                                if (to) {
                                    clearTimeout(to);
                                }
                                to = setTimeout(function () {
                                    var v = $('#demo_q').val();
                                    $('#jstree_demo').jstree(true).search(v);
                                }, 250);
                            });

                            $('#jstree_demo')
                                .jstree({
                                    "core": {
                                        "animation": 0,
                                        "check_callback": true,
                                        'force_text': true,
                                        "themes": {"stripes": true},
                                        'data': {
                                            'url': function (node) {
                                                return node.id === '#' ? '/static/3.3.8/assets/ajax_demo_roots.json' : '/static/3.3.8/assets/ajax_demo_children.json';
                                            },
                                            'data': function (node) {
                                                return {'id': node.id};
                                            }
                                        }
                                    },
                                    "types": {
                                        "#": {"max_children": 1, "max_depth": 4, "valid_children": ["root"]},
                                        "root": {
                                            "icon": "/static/3.3.8/assets/images/tree_icon.png",
                                            "valid_children": ["default"]
                                        },
                                        "default": {"valid_children": ["default", "file"]},
                                        "file": {"icon": "glyphicon glyphicon-file", "valid_children": []}
                                    },
                                    "plugins": ["contextmenu", "dnd", "search", "state", "types", "wholerow"]
                                });
                        });
                    </script>
                </div>
                <div class="col-md-12">
                    <p style="text-align:center; padding-top:1em;">
                        <button class="btn btn-info"
                                onclick="$(this).blur().parent().next().slideToggle(); return false;">show the complete
                            code
                        </button>
                    </p>
                    <pre style="margin-top:1em; display:none;"><code>$('#jstree_demo').jstree({
  "core" : {
    "animation" : 0,
    "check_callback" : true,
    "themes" : { "stripes" : true },
    'data' : {
      'url' : function (node) {
        return node.id === '#' ?
          'ajax_demo_roots.json' : 'ajax_demo_children.json';
      },
      'data' : function (node) {
        return { 'id' : node.id };
      }
    }
  },
  "types" : {
    "#" : {
      "max_children" : 1,
      "max_depth" : 4,
      "valid_children" : ["root"]
    },
    "root" : {
      "icon" : "/static/3.3.8/assets/images/tree_icon.png",
      "valid_children" : ["default"]
    },
    "default" : {
      "valid_children" : ["default","file"]
    },
    "file" : {
      "icon" : "glyphicon glyphicon-file",
      "valid_children" : []
    }
  },
  "plugins" : [
    "contextmenu", "dnd", "search",
    "state", "types", "wholerow"
  ]
});</code></pre>
                </div>
            </div>
            <div class="row" style="margin-top:2em;">
                <div class="col-md-12">
                    <div class="alert alert-block alert-info" style="text-align:center;">You can see the code of the
                        following demos in the <code>demo</code> folder of the download
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top:2em;">
                <div class="col-md-12">
                    <h3>Filebrowser demo</h3>
                    <iframe src="/demo_filebrowser/index.php"
                            style="border:0; display:block; height:450px; width:100%; border-radius:5px; box-shadow:0 0 5px #CCCCCC; padding:10px;"
                            frameborder="0"></iframe>
                </div>
            </div>
            <div class="row" style="margin-top:2em;">
                <div class="col-md-12">
                    <h3>Database demo</h3>
                    <iframe src="/demo_sitebrowser/index.php"
                            style="border:0; display:block; height:450px; width:100%; border-radius:5px; box-shadow:0 0 5px #CCCCCC; padding:10px;"
                            frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <p style="text-align:center; margin-top:2em;"><a href="//old.jstree.com" target="_blank">click here for the old site (v.1)</a>
        </p>
    </div>
{% endblock %}
{% block js %}
    <script>
        $(document).ready(function(){
            $("#demos").addClass("active")
        });
        $('.item').on("click",function () {
            console.log("-------------------");
            var is_show = $(this).find("item-inner").css("display");
            console.log(is_show);
            if(is_show ==="block" ){
                $(this).find("item-inner").attr('css','display:none');
            }else{
                $(this).find("item-inner").attr('css','display:block');
            }
        })

    </script>
{% endblock %}
